<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
      <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-form-item prop="shopname">
          <el-input v-model="filters.shopname" placeholder="商家名称" readonly="" @focus="openModalDialog()"></el-input>
        </el-form-item>
        <el-form-item prop="productname">
          <el-input v-model="filters.productname" placeholder="商品编码"></el-input>
        </el-form-item>
        <el-form-item prop="productname">
          <el-input v-model="filters.productname" placeholder="商品名称"></el-input>
        </el-form-item>
        <el-row>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
      <el-form :inline="true" :size="size">
        <el-form-item>
          <el-button-group>
            <el-tooltip content="刷新" placement="top">
              <el-button icon="fa fa-refresh" @click="findPage(null)"></el-button>
            </el-tooltip>
            <el-tooltip content="列显示" placement="top">
              <el-button icon="fa fa-filter" @click="displayFilterColumnsDialog"></el-button>
            </el-tooltip>
            <el-tooltip content="导出" placement="top">
              <el-button icon="fa fa-file-excel-o" @click="downloadExcel"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
      <!--表格显示列界面-->
      <table-column-filter-dialog
        ref="tableColumnFilterDialog"
        :columns="columns"
        @handleFilterColumns="handleFilterColumns"
      ></table-column-filter-dialog>
    </div>
    <!--表格内容栏-->
    <cy-table
      :height="350"
      permsDelete="false"
      :data="pageResult"
      :columns="filterColumns"
      :showEditOperation="false"
      :showDetailOperation="false"
      :showBatchDelete="false"
      :showOperation="false"
      :showDeleteOperation="false"
      :showSelection="false"
      @findPage="findPage"
      ref="CyTable"
    ></cy-table>
    <el-dialog
      title="选择商家"
      width="35%"
      :visible.sync="dialogVisible"
      :close-on-click-modal="true"
      @closed="closeDetail"
    >   
        <el-form :inline="true" :model="filters" :size="size" ref="filters">
        <el-form-item prop="shopname">
          <el-input v-model="filters.shopname" placeholder="商家名称" readonly="" @focus="openModalDialog()"></el-input>
        </el-form-item>
        <el-form-item prop="productname">
          <el-input v-model="filters.productname" placeholder="商品编码"></el-input>
        </el-form-item>
        <el-row>
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage(null)"
            />
          </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')" />
          </el-form-item>
        </el-row>
      </el-form>
      <el-table
        style="width: 100%"
        ref="refTable"
        :close-on-click-modal="true"
        :data="tableData"
        :columns="filterColumns"
        @row-click="clickRow"
        @closed="closeDetail"
      >
        <el-table-column prop="merchantCode" label="商家编码" width="200"></el-table-column>
        <el-table-column prop="merchantName" label="商家名称" width="200"></el-table-column>
        <el-table-column prop="merchantTypeName" label="	商家类型" width="180"></el-table-column>
      </el-table>

      <!--分页栏-->
      <div class="toolbar" style="padding:10px;">
        <el-pagination
          layout="total, prev, pager, next, jumper,sizes"
          @current-change="refreshPageRequest"
          @size-change="handleSizeChange"
          :current-page="pageRequest.pageNum"
          :page-size="pageRequest.pageSize"
          :total="totalSize"
          style="float:right;"
          :page-sizes="[10, 20, 30, 40]"
        ></el-pagination>
      </div> 
    </el-dialog>
  </div>
</template>

<script>
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import { format } from "@/utils/datetime";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
export default {
  components: {
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: "small",
      filters: {
        shopname: "",
        productname: "",
        isjingxuan: "",
        assemblesort: "",
        startTime: "",
        endTime: "",
        res:{
        "total": 4,
        "code": "0000",
        "rows": [{"id":1911060000466413,"storeId":-1,"mpId":1911060000466413,"productId":null,"merchantId":1909110000098882,"merchantCode":"001","merchantName":"张小二服饰","chineseName":"测试商品002","parentId":1911060000466413,"code":"1911060000465847","thirdMerchantProductCode":null,"type":1,"englishName":null,"subtitle":null,"artNo":null,"merchantProdLength":null,"merchantProdWidth":null,"merchantProdHeight":null,"netWeight":null,"grossWeight":null,"merchantProdVolume":null,"shelflifeDays":null,"isWeighted":null,"measureType":null,"replacementDays":null,"status":2,"isVoice":null,"isInvoice":0,"isVatInvoice":0,"isForceInvoice":0,"channelCode":-1,"countryOfOriginCode":null,"countryOfOriginName":null,"provinceOfOriginCode":null,"provinceOfOriginName":null,"cityOfOriginCode":null,"cityOfOriginName":null,"regionOfOriginCode":null,"regionOfOriginName":null,"brandId":null,"categoryId":1909160000185958,"typeOfProduct":0,"freightTemplateId":null,"versionNo":1,"guaranteeDays":null,"returnDays":null,"saleType":null,"turnoverChannel":null,"purchaseTaxRate":null,"saleTaxRate":null,"canSale":1,"frontCanSale":null,"barcode":null,"mainUnitName":"件","categoryName":"米面粥","fullIdPath":"1909110000067654-1909160000185840-1909160000185958","fullNamePath":"后台类目树-营养辅食001-米面粥","brandName":null,"mainPictureUrl":"https://cdn.oudianyun.com/trunk/back-product/1573051340666_13.461424015330836_1fb88e1a-b043-423a-b7d1-bf5929c4d615.jpg","mpStandard":null,"attributeList":[],"warehouseType":1},{"id":1909170000080289,"storeId":-1,"mpId":1909170000080289,"productId":null,"merchantId":1909110000098882,"merchantCode":"001","merchantName":"张小二服饰","chineseName":"普通商品001","parentId":1909170000080289,"code":"111111","thirdMerchantProductCode":"06312333c0c24ceb8d894067e66955e8","type":1,"englishName":"putong","subtitle":null,"artNo":"0001","merchantProdLength":null,"merchantProdWidth":null,"merchantProdHeight":null,"netWeight":null,"grossWeight":null,"merchantProdVolume":null,"shelflifeDays":null,"isWeighted":null,"measureType":null,"replacementDays":null,"status":2,"isVoice":null,"isInvoice":0,"isVatInvoice":0,"isForceInvoice":0,"channelCode":-1,"countryOfOriginCode":null,"countryOfOriginName":null,"provinceOfOriginCode":null,"provinceOfOriginName":null,"cityOfOriginCode":null,"cityOfOriginName":null,"regionOfOriginCode":null,"regionOfOriginName":null,"brandId":1909110000069373,"categoryId":1909160000185958,"typeOfProduct":0,"freightTemplateId":null,"versionNo":3,"guaranteeDays":null,"returnDays":null,"saleType":null,"turnoverChannel":null,"purchaseTaxRate":null,"saleTaxRate":null,"canSale":1,"frontCanSale":null,"barcode":null,"mainUnitName":"千克","categoryName":"米面粥","fullIdPath":"1909110000067654-1909160000185840-1909160000185958","fullNamePath":"后台类目树-营养辅食001-米面粥","brandName":"贝因美","mainPictureUrl":"https://cdn.oudianyun.com/trunk/back-product/1568704254739_19.589836210456212_3d9e9823-50d4-4b96-9d60-8db387dc8e84.jpg","mpStandard":null,"attributeList":[],"warehouseType":1},{"id":1912210008094629,"storeId":-1,"mpId":1912210008094629,"productId":null,"merchantId":1909110000098882,"merchantCode":"001","merchantName":"张小二服饰","chineseName":"12月21日新建的商品","parentId":1912210008094629,"code":"1912210008094614","thirdMerchantProductCode":null,"type":1,"englishName":null,"subtitle":null,"artNo":null,"merchantProdLength":null,"merchantProdWidth":null,"merchantProdHeight":null,"netWeight":null,"grossWeight":null,"merchantProdVolume":null,"shelflifeDays":null,"isWeighted":null,"measureType":null,"replacementDays":null,"status":2,"isVoice":null,"isInvoice":0,"isVatInvoice":0,"isForceInvoice":0,"channelCode":-1,"countryOfOriginCode":null,"countryOfOriginName":null,"provinceOfOriginCode":null,"provinceOfOriginName":null,"cityOfOriginCode":null,"cityOfOriginName":null,"regionOfOriginCode":null,"regionOfOriginName":null,"brandId":null,"categoryId":1909160000185958,"typeOfProduct":0,"freightTemplateId":null,"versionNo":6,"guaranteeDays":null,"returnDays":null,"saleType":null,"turnoverChannel":null,"purchaseTaxRate":null,"saleTaxRate":null,"canSale":1,"frontCanSale":null,"barcode":null,"mainUnitName":"件","categoryName":"米面粥","fullIdPath":"1909110000067654-1909160000185840-1909160000185958","fullNamePath":"后台类目树-营养辅食001-米面粥","brandName":null,"mainPictureUrl":"https://cdn.oudianyun.com/trunk/back-product/1576916293011_64.66009775625687_609c637c-e994-46eb-abe5-5ca8b732024d.jpg","mpStandard":null,"attributeList":[],"warehouseType":1},{"id":1912190007376451,"storeId":-1,"mpId":1912190007376451,"productId":null,"merchantId":1909110000098882,"merchantCode":"001","merchantName":"张小二服饰","chineseName":"专属供应商商品XY","parentId":1912190007376451,"code":"1912190007376449","thirdMerchantProductCode":null,"type":1,"englishName":null,"subtitle":null,"artNo":null,"merchantProdLength":null,"merchantProdWidth":null,"merchantProdHeight":null,"netWeight":null,"grossWeight":null,"merchantProdVolume":null,"shelflifeDays":null,"isWeighted":null,"measureType":null,"replacementDays":null,"status":2,"isVoice":null,"isInvoice":0,"isVatInvoice":0,"isForceInvoice":0,"channelCode":-1,"countryOfOriginCode":null,"countryOfOriginName":null,"provinceOfOriginCode":null,"provinceOfOriginName":null,"cityOfOriginCode":null,"cityOfOriginName":null,"regionOfOriginCode":null,"regionOfOriginName":null,"brandId":null,"categoryId":1909160000185958,"typeOfProduct":0,"freightTemplateId":null,"versionNo":19,"guaranteeDays":null,"returnDays":null,"saleType":null,"turnoverChannel":null,"purchaseTaxRate":null,"saleTaxRate":null,"canSale":1,"frontCanSale":null,"barcode":null,"mainUnitName":"毫升","categoryName":"米面粥","fullIdPath":"1909110000067654-1909160000185840-1909160000185958","fullNamePath":"后台类目树-营养辅食001-米面粥","brandName":null,"mainPictureUrl":"https://cdn.oudianyun.com/trunk/back-product/1576750153608_10.803727059062307_a7c3f5df-1e85-4e82-998e-5fccc2e62e9b.jpg","mpStandard":null,"attributeList":[],"warehouseType":1}]
        }
      },
      statusOption: [{
        status: '',
        label: '请选择'
      }, {
        status: 'N',
        label: '可用'
      }, {
        status: 'Y',
        label: '不可用'
      }],
      tableData:  [{"currentPage":0,"itemsPerPage":0,"id":null,"merchantId":1909110000098882,"merchantCode":"001","merchantCodes":null,"merchantName":"张小二服饰","merchantType":11,"merchantTypeName":"自营商家","isDefault":null,"userId":null,"status":null,"merchantIds":null,"isAvailable":null,"isDeleted":null,"versionNo":null,"createUserid":null,"createUsername":null,"createUserip":null,"createUsermac":null,"createTime":null,"createTimeDb":null,"serverIp":null,"updateUserid":null,"updateUsername":null,"updateUserip":null,"updateUsermac":null,"updateTime":null,"updateTimeDb":null,"clientVersionno":null,"companyId":null,"userName":null,"startItem":0}],
      detailParam: {},
      totalSize:1,
      operation: false, // true:新增, false:编辑
      dialogVisible: false, // 新增编辑界面是否显示
      columns: [
        { prop: "merchantCode", label: "商家编码", minWidth: 100},
        { prop: "merchantName", label: "商家名称", minWidth: 100 },
        { prop: "code", label: "商品编码", minWidth: 80 },
        { prop: "chineseName", label: "商品名称", minWidth: 120},
        { prop: "mpStandard", label: "商品规格", minWidth: 120 },
        { prop: "mainUnitName", label: "商品主计量单位", minWidth: 100 }
	  ],
	  filterColumns:[],
      pageRequest: { pageNum: 1, pageSize: 10 },
      pageResult: {},

      operation: false, // true:新增, false:编辑
      editDialogVisible: false, // 新增编辑界面是否显示
      editLoading: false,
    };
  },
  methods: {
    // 获取分页数据
    findPage: function(data) {
      this.$refs.CyTable.findPageStaticState(this.filters);
    },
    openModalDialog: function(params) {

    },
    closeDetail: function(params) {
      this.content = "";
    },
  // 换页刷新
    refreshPageRequest: function(pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.handleDetail();
    },
    // 换页刷新
    handleSizeChange: function(pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.pageRequest.pageNum = 1;
      this.handleDetail();
    },
    editButton:function(){
      if(this.idArray.length<1){
        this.$message({
            message: '请选择需要操作的数据',
            type: 'error',
            center:true,
            offset:250,
            duration:1000
        });
        return false;
      }
      let params = {'t':'marketAssemble'};
      var this_ = this;
    //   this.utils.request.editUserInfo(params, function(res) {
        this_.$message({
            message: '操作成功',
            type: 'success',
            center:true,
            offset:250,
            duration:1000
        });
        this_.findPage(null);
    //   });
    },
    openModalDialog: function() {
        this.detailParam.t = "marketAssemble";
        this.dialogVisible = true;
        let this_ = this;
    },
    clickRow(row){
        this.$refs.refTable.toggleRowSelection(row);
        this.dialogVisible = false;
    },
    // 时间格式化
    dateFormat: function(row, column, cellValue, index) {
      return format(row[column.property]);
    },

    resetForm(formName) {
      if (this.$refs[formName] != undefined) {
        this.$refs[formName].resetFields();
        this.findPage(null);
      }
    },

    // 处理表格列过滤显示
    displayFilterColumnsDialog: function() {
      this.$refs.tableColumnFilterDialog.setDialogVisible(true);
    },
    // 处理表格列过滤显示
    handleFilterColumns: function(data) {
      this.filterColumns = data.filterColumns;
      this.$refs.tableColumnFilterDialog.setDialogVisible(false);
    },
    // 处理表格列过滤显示
    initColumns: function() {
      var temp = [];

      $.each(this.columns, function(key, val) {
        temp.push(val);
      });
      this.filterColumns = temp;
    },
    //列表下载
    downloadExcel() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let filename = "轮播图管理下载";
          this.$refs.CyTable.exportData(
            this.filters,
            this.filterColumns,
            filename
          );
        })
        .catch(() => {});
    }
  },
  mounted() {
    this.initColumns();
  }
};
</script>

<style scoped>
</style>